// 全局
*{
	margin: 0;
	padding:0;
	outline: none;
}
body{
	font-family: "Microsoft Yahei";
	font-size: 14px;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
a,input,button,div,textarea {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}
a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
ul{
	list-style: none;
}
.ub>a,
.ub>span{
	display: block;
}
.lazy{
	background-image: url(../images/grey.gif);
	background-size: cover;
	background-position: center; 
}
img{
	vertical-align:top;
}
#oimg {
	background-image: url(./images/o6.png)
}
.clear{
	content: "";
	display: block;
	clear: both;
}
::-webkit-input-placeholder {
	color:#c4c4c4;
}
// flexbox
.ub  
{
	display: -webkit-box !important;
	display: box !important;
	position:relative;
}
.ub-con  
{
	position:absolute;
	width:100%;
	height:100%;
}
.ub-ac
{
	-webkit-box-align:center;
	box-align:center;
}
.ub-pc
{
	-webkit-box-pack:center;
	box-pack:center;
}
.ub-ver
{
	-webkit-box-orient:vertical;
	box-orient:vertical;
}
.ub-f1
{
	position:relative;
	-webkit-box-flex: 1; 
	box-flex: 1;
}
.ub-f2
{
	position:relative;
	-webkit-box-flex: 2;
	box-flex: 2; 
}
.ub-ae
{
	-webkit-box-align:end;
	box-align:end;
}
.ub-pe
{
	-webkit-box-pack:end;
	box-pack:end;
}
.ub-pj
{
	-webkit-box-pack:justify;
	box-pack:justify;
}




// color类
.cl-b-lgrey{
	background-color: #eee;
}
.cl-b-dgrey{
	background-color: #f1f1f1;
}
.cl-b-xdgrey{
	background-color: #999;
}
.cl-b-xlgrey{
	background-color: #808080;
}
.cl-b-xxlgrey{
	background-color: #e6e6e6;
}
.cl-b-white{
	background-color: #fff;
}
.cl-b-orange{
	background-color: #ff6633;
}
.cl-b-lorange {
	background-color: #ff9a66;
}
.cl-b-oblack{
	background-color: rgba(0, 0, 0, 0.7)
}
.cl-f-dgrey{
	color:#333;
}
.cl-f-grey{
	color: #666;
}
.cl-f-lgrey{
	color:#999;
}
.cl-f-xlgrey{
	color:#ccc;
}
.cl-f-xxlgrey{
	color:#666666;
}
.cl-f-black{
	color:#000000;
}
.cl-f-orange{
	color:#ff6633;
}
.cl-f-white{
	color:#fff;
}
.cl-f-lorange {
	color: #ff9a66;
}
// 布局类
// 边距
.margin-r-5{margin-right: 5px;}
.margin-r-8{margin-right: 8px;}
.margin-r-10{margin-right: 10px;}
.margin-r-15{margin-right: 15px;}

.margin-l-5{margin-left: 5px;}
.margin-l-8{margin-left: 8px;}
.margin-l-10{margin-left: 10px;}
.margin-l-15{margin-left: 15px;}

.margin-rl-5{margin-left: 5px;margin-right: 5px;}
.margin-rl-8{margin-left: 8px;margin-right: 8px;}
.margin-rl-10{margin-left: 10px;margin-right: 10px;}
.margin-rl-15{margin-left: 15px;margin-right: 15px;}

.margin-b-5{margin-bottom: 5px;}
.margin-b-8{margin-bottom: 8px;}
.margin-b-10{margin-bottom: 10px;}
.margin-b-15{margin-bottom: 15px;}

.margin-tb-5{margin-top: 5px;margin-bottom: 5px;}
.margin-tb-8{margin-top: 8px;margin-bottom: 8px;}
.margin-tb-10{margin-top: 10px;margin-bottom: 10px;}
.margin-tb-15{margin-top: 15px;margin-bottom: 15px;}
.margin-tb-20{margin-top: 20px;margin-bottom: 20px;}

.margin-custom(@top:0px,@bottom:0px,@left:0px,@right:0px){
	margin-top: @top;
	margin-bottom: @bottom;
	margin-left: @left;
	margin-right: @right;
}

.padding-rl-5{padding-left: 5px;padding-right: 5px;}
.padding-rl-8{padding-left: 8px;padding-right: 8px;}
.padding-rl-10{padding-left: 10px;padding-right: 10px;}
.padding-rl-15{padding-left: 15px;padding-right: 15px;}

.padding-tb-5{padding-top: 5px;padding-bottom: 5px;}
.padding-tb-8{padding-top: 8px;padding-bottom: 8px;}
.padding-tb-10{padding-top: 10px;padding-bottom: 10px;}
.padding-tb-15{padding-top: 15px;padding-bottom: 15px;}

.padding-custom(@top:0px,@bottom:0px,@left:0px,@right:0px){
	padding-top: @top;
	padding-bottom: @bottom;
	padding-left: @left;
	padding-right: @right;
}

//icon
.icon(@iconw: 15px,@iconh: 15px) {
	display: block;
	background-size: 100%;
	width: @iconw;
	height: @iconh;
	margin-left: 3px;
	margin-right: 3px;
	background-repeat: no-repeat;
	background-position: center;
}
.icon-like {
	position: relative;
	top: -2px;
	.icon(15px,15px);
	background-image: url(../images/icon-like.png);
}
.icon-comment {
	.icon(15px,15px);
	background-image: url(../images/icon-comment.png);
}
.icon-like-grey {
	position: relative;
	top: -2px;
	.icon(15px,15px);
	background-image: url(../images/icon-like-grey.png);
}
.icon-comment-grey {
	.icon(15px,15px);
	background-image: url(../images/icon-comment-grey.png);
}
.icon-search {
	.icon(45px,45px);
	background-size: 22px 22px;
	background-image: url(../images/icon-search.png);
}
.icon-back {
	.icon(45px,45px);
	background-size: 13px 20px;
	background-position: 10px center;
	background-image: url(../images/icon-back.png);
}
.icon-empty{
	.icon(45px,45px);
}
.icon-follow-add{ 
	.icon(22px,22px);
	background-image: url(../images/icon-follow-add.png);
}
.icon-follow-each{
	.icon(22px,22px);
	background-image: url(../images/icon-follow-each.png);
}
.icon-del{
	.icon(16px,16px);
	background-image: url(../images/icon-del.png);
}
.icon-plus{
	.icon(20px,20px);
	background-image: url(../images/icon-plus.png);
}
.icon-share{
	.icon(45px,45px);
	background-size: 16px 16px;
	background-image: url(../images/icon-share.png);
}
.icon-comment{ 
	.icon(28px,28px);
	// .margin-custom; 
	background-size: 18px 16px;
	background-position: 10px center;
	background-image: url(../images/icon-write.png);
}
.icon-drop{
	background-size: 14px 9px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../images/icon-drop.png);
}
.icon-list{
	.icon(45px,45px);
	background-size: 18px 15px;
	background-image: url(../images/icon-list.png);
}
// 文字
.f10{
	font-size: 10px;
}
.f12{
	font-size: 12px;
}
.f14{
	font-size: 14px;
}
.f16{
	font-size: 16px;
}
.f18{
	font-size: 18px;
}
.text-overflow{
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
}


// 元素类
.body-pad{
	padding-top: 45px;
	padding-bottom: 50px;
}
.body-no-pb{
	padding-bottom: 0px;
}
.row{
	.padding-rl-10;
}
.clickable.active{
	background-color: #f2f2f2;
}
.clickable-deep.active{
	opacity: 0.5
}
.cl-active {
	background-color: #fcf5f2;
}
.like{
	.margin-custom(0px,0px,0px,6px);
}
.like .like-icon{
	position: relative;
	top: -1px;
	.margin-custom(0px,0px,0px,3px);
	height: 15px;
}
.comment .comment-icon{
	position: relative;
	top: 2px;
	.margin-custom(0px,0px,0px,3px);
	height: 12px;
}
.page-header{
	position: fixed;
	top: 0;
	left: 0;
	height: 45px;
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	text-align: center;
	box-sizing: border-box;
	z-index: 999;
}
.page-header img {
	vertical-align: middle;
}
.page-name{
	font-size: 18px;
}
.oimg{
	width: 100%;
}

//公共底部菜单
.five-grid{
	text-align: center;
}
.five-grid img{
	width: 50%;
}
.footer-five-grid {
	text-align: center;
	position: fixed;
	width: 100%;
	bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top: 1px solid #eee;
	z-index: 920;
}
.footer-five-grid>div>img{
	width: 40%;
}
.footer-five-grid p {
	line-height: 16px;
} 

// 内页圆形的头像加上tx-cir类
.tx-cir{
	.margin-r-8;
	width: 38px;
	height: 38px;
	border-radius: 100%;
	border:1px solid #eee;
}

//随手拍公共部分
.ssp-item{
	.margin-b-8;
	.padding-custom(15px,25px,10px,10px);
}
.ssp-cotent{
	.padding-custom(0,0,5px,8px);
}
.ssp-content-head p{
	position: relative;
	display: inline-block;
}
.ssp-content-head p:after{
	content: "";
	position: absolute;
	right: -15px;
	top: 5px;
	width: 12px;
	height: 12px;
	background: url('../images/icon-cap.png') no-repeat;
	background-size: 100%;

}
.ssp-item .follow{
	display: block;
	float: right;
	width:46px;
	height: 21px;
	border-radius: 5px;
	border:1px solid #ccc;
	text-decoration: none;
	text-align: center;
	line-height: 21px;
}
.ssp-item .follow.active{
	background-color: #ccc;
	color:#fff;
}
.ssp-content-article{
	.margin-custom(10px,15px,0,0);
	.text-overflow
}
.ssp-content-img:after{
	.clear
}
.ssp-content-img li{
	margin-right: 2%;
	.margin-b-8;
	width: 32%;
	float: left;
}
.ssp-content-img li:nth-child(3n){
	margin-right: 0;
}
.ssp-content-time span{
	margin-left: 8px;
}
.ssp-content-foot{
	margin-top: 7px;
}
.ssp-footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	border-top: 1px solid #eee;
	z-index: 920;
}
.ssp-footer img{	
	margin-top: -1px;
	margin-right: 10px;
	width: 24px;
	height: 22px;
	vertical-align: bottom;
}
//动态公共部分
.dongtai-img{
	width: 100px;
	height: 90px;
}
.dongtai-body{
	padding-top: 82px;
	padding-bottom: 0;
}
.dongtai-item + .dongtai-item >div{
	border-top: 1px solid #eee;
}
.dongtai-item >div{
	.padding-tb-10;
}
.dongtai-img{
	.margin-r-10;
}
.dongtai-text h3 {
	.margin-b-15;
	font-weight: normal;
}
.dongtai-text h3.with-article{
	.margin-b-8;
}
.dongtai-article{
	.margin-b-8;
	.text-overflow;
}
.dongtai-info{
	.margin-b-8;
}
.dongtai-info.with-article{
	.margin-b-5;
}
.dongtai-info img{
	position: relative;
	top: 1px;
	width: 15px;
	height: 15px;
}
.dongtai-info p{
	position: relative;
	top: -1px;
	.margin-custom(0,0,3px,8px);
}

//头部公共部分
.header-icon {
	width: 33px;
}
.header-icon img {
	width: 100%;
}
//tab头部
.tab-section{
	position: fixed;
	top: 45px;
	left: 0;
	width: 100%;
	height: 37px;
	line-height: 37px;
	border-bottom: 1px solid #dcdcdc;
	z-index: 999;
}
.tab-section>div{
	position: relative;
}
.tab-section div.ub-f1>a{
	display: inline-block;
	width: 100%;
	height: 100%;
	text-align: center;
	text-decoration: none;
}
.tab-section div.ub-f1 .active{
	border-bottom: 1px solid #ff6633;
	.cl-f-orange;
	height: 37px;
}
.tab-line{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 25%;
	height: 1px;
	-webkit-transition:all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);;
	transition:all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);; 
}
// iScroll公共部分
#scroll-wrapper,
.scroll-wrapper {
	// position:absolute; 
	z-index:1;
	// top:45px; 
	// bottom:50px;
	width:100%;
	overflow:auto;
}

#scroller,
.scroller {
	// position:absolute;
	z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}
.scroll-wrapper{
	display: none;
}
.scroll-wrapper.active{
	display: block;
}
// comfirm公共样式
.comfirm {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: rgba(0,0,0,0.5);
}
.comfirm-content {
	position: absolute;
	top: 35%;
	left: 50%;
	width: 200px;
	background-color: #fff;
	border-radius: 5px;
	padding: 30px 15px 20px 15px;
	text-align: center;
	margin-left: -100px;
}
.comfirm-footer {
	margin-top: 20px;
}
.comfirm-footer .btn {
	border-radius: 5px;
	border: none;
	padding: 5px 20px;
	font-size: 14px;
}
.comfirm-footer .btn + .btn {
	margin-left: 15px;
}
// loading效果
.loading-wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #eee;
	top: 0;
	left: 0;
	z-index: 9999;
}
.loading {
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -50px;
  text-indent: -9999em;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ff9966;
  background: -moz-linear-gradient(left, #ff9966 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ff9966 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ff9966 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ff9966 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ff9966 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: loadshow 0.8s infinite linear;
  animation: loadshow 0.8s infinite linear;
}
.loading:before {
  width: 50%;
  height: 50%;
  background: #ff9966;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loading:after {
  background: #eee;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes loadshow {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loadshow {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
// 下拉加载效果
.add-loading {
	margin: 15px auto;
	width: 50px;
	height: 20px;
	text-align: center;
	font-size: 10px;
}
.add-loading > div {
	background-color: #FF9966;
	height: 100%;
	width: 3px;
	display: inline-block;
	-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
	animation: stretchdelay 1.2s infinite ease-in-out;
}
.add-loading .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}
.add-loading .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}
.add-loading .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}
 
.add-loading .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

.bottom-tips {
	text-align: center;
	white-space: nowrap;
	color: #999;
	font-size: 12px;
	line-height: 30px;
}
.ssp-wrapper .bottom-tips {
	margin-top: -8px;
}
 
@-webkit-keyframes stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
	20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
	0%, 40%, 100% {transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}  
	20% {transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}
}
//返回顶部
.top {
	width: 35px;
	height: 35px;
	position: fixed;
	right: 15px;
	bottom: 65px;
	z-index: 900;
	// opacity: 0;
}
.top img {
	width: 100%;
}
.top-show{
	-webkit-animation:showUp .7s linear forwards;
	animation:showUp .7s linear forwards;
}
.top-hide{
	-webkit-animation:showDown .7s linear forwards;
	animation:showDown .7s linear forwards;
}
@-webkit-keyframes showUp{
	from{
		
		-webkit-transform:translateY(100px);
	}
	to{
		
		-webkit-transform:translateY(0px);
	}
}
@keyframes showUp{
	0%{
		
		-webkit-transform:translateY(100px);
	}
	100%{
		
		-webkit-transform:translateY(0px);
	}
}
@-webkit-keyframes showDown{
	0%{
		
		-webkit-transform:translateY(0px);
	}
	100%{
		
		-webkit-transform:translateY(100px);
	}
}
@keyframes showDown{
	0%{
		
		-webkit-transform:translateY(0px);
	}
	100%{
		
		-webkit-transform:translateY(100px);
	}
}

//随手拍，试用，食谱发布页等均可公用
.poblish-submit{
	.padding-custom(0,0,10px,10px);
	height: 45px;
	line-height: 45px;
	text-decoration: none;
}
.poblish-block{
	.padding-custom(20px,20px,10px,10px);
}
.poblish-block + .poblish-block {
	margin-top: 8px;
}
.poblish-form .form-control{
	.padding-tb-15;
	padding-bottom: 10px;
	width: 100%;
	border: 0;
	font-size: 14px;
}
.poblish-form textarea.form-control{
	height: 100px;
	resize:none;
}
.poblish-block-title{
	margin-bottom: 20px;
}
.poblish-img-list{
	.margin-b-10;
}
.poblish-img-list:after{
	.clear;
}
.poblish-img-list li{
	position: relative;
	margin-right: 1.9%;
	.margin-b-10;
	width: 23.5%;
	float: left;
	border-radius: 5px;
}
.poblish-img-list li:nth-child(4n+4){
	margin-right: 0;
}

.poblish-img-list li .icon-del{
	position: absolute;
	top: -7px;
	right: -7px;
}
.poblish-img-list .added-img{
	background-size: 100%;
	background-position: center;
}
.poblish-img-add{
	color: #b5b5b5;
	background-color: #e7e7e7;
}
.poblish-img-add .oimg{
	z-index: -1;
}
.poblish-img-addtxt{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -22.5px;
	margin-left: -28px;
	width: 56px;
}
.poblish-img-addtxt p{
	margin-top: 5px;
}
.poblish-img-add input{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 100;
}
// 详情页通用评论列表
.comment-list-wrapper{
	margin-top: 8px;
	overflow-y: scroll;
}
.comment-list-title{
	.padding-custom(20px,10px,10px,10px);
}
.comment-time{
	.margin-custom(3px,3px,0,0);
}
.comment-time span{
	.margin-l-8;
}
.comment-h1{
	padding-top:10px;
	padding-bottom: 25px;
}
.comment-h2{
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid #eee;
}
.send-comment-footer{
	position: fixed;
	bottom: 0;
	left: 0;
	.padding-rl-15;
	width: 100%;
	height: 50px;
	border-top: 1px solid #eee;
	z-index: 999;
}
.send-comment-footer .form-control{
	margin-top: 11px;
	padding:0 10px;
	width: 82%;
	height: 28px;
	border:0;
	border-radius: 5px;
	float: left;
}
.icon-comment-wrapper{
	margin-top: 11px;
	height: 28px;
	width:28px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	float: left;
}
.send-comment-footer .form-control.with-icon{
	padding: 0 3px;
	width: 80%;
	border-radius: 0;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.send-comment-footer a{
	margin-left: 8px;
	display: block;
	height: 50px;
	line-height: 50px;
	float: left;
}
.comment-user{
	margin-right: 3px;
}
@media(max-width:320px){
	.send-comment-footer .form-control.with-icon{
		width: 77%;
	}
}
.no-foot .top {
	bottom: 15px;
}
.icon-index {
	display: block;
	background-size: 100%;
	width: 45px;
	height: 45px;
	margin-left: 3px;
	margin-right: 3px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 25px;
	background-image: url(../images/f-ic1.png);
}
.rimg {
	width: 100%;
}
.comment-count,.comment-count-con {
	.padding-custom(0,0,3px,3px);
}
.ssp-detail-intro p {
	line-height: 20px;
}
.f-ic1,.f-ic2,.f-ic3,.f-ic4,.f-ic5 {
  display: block;
  background-size: 100%;
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../images/f-ic1.png); 
}
.f-ic2 {
  background-image: url(../images/f-ic2.png); 
}
.f-ic3 {
  background-image: url(../images/f-ic3.png); 
}
.f-ic4 {
  background-image: url(../images/f-ic4.png); 
}
.f-ic5 {
  background-image: url(../images/f-ic5.png); 
}
.footer-five-grid .active .f-ic1 {
  background-image: url(../images/f-ic1-1.png); 
}
.footer-five-grid .active .f-ic2 {
  background-image: url(../images/f-ic2-1.png); 
}
.footer-five-grid .active .f-ic3 {
  background-image: url(../images/f-ic3-1.png); 
}
.footer-five-grid .active .f-ic4 {
  background-image: url(../images/f-ic4-1.png); 
}
.footer-five-grid .active .f-ic5 {
  background-image: url(../images/f-ic5-1.png); 
}